<!--
 * @Description:
 * @Author: Chenx
 * @Date: 2023-04-13 10:48:53
 * @LastEditors: Chenx
 * @LastEditTime: 2023-04-13 11:11:04
-->
<template>
  <i class="s-icon">
    <img :src="geturl" alt="" :style="styleObject" />
  </i>
</template>

<script setup lang="ts">
const props = defineProps({
  name: {
    type: String,
    require: true,
    default: ''
  },
  size: {
    type: String,
    require: false,
    default: '20px'
  }
})

const geturl = computed(() => {
  if (!props.name) return ''
  else if (props.name.includes('/') || props.name.includes('base64')) {
    return props.name
  } else if (props.name.includes('svg')) {
    return require(`@/assets/icons/svg/${props.name}`)
  }
  return require(`@/assets/icons/png/${props.name}.png`)
})

const styleObject = computed(() => {
  return {
    width: props.size,
    height: props.size
  }
})
</script>

<style lang="scss" scoped>
.s-icon {
  display: inline-block;
  line-height: 1;
  overflow: hidden;
  img {
    float: left;
  }
}
</style>
